<template>
    <div class="pets-catli-container">
        <div class="pets-container">
            <div class="pets-item" v-for="(pet, index) in paginatedPetList" :key="index" @click="goToDetail(pet.petId)">
            <!-- <img :src="pet.pet_image" alt="宠物图片" class="pet-img"> -->
            <img :src="pet.coverImage" alt="宠物图片" class="pet-img">
            <div class="pet-info">
                <div class="name">宠物名字：{{ pet.petName }}</div>
                <div class="breed">品种：{{ pet.breed }}</div>
                <div class="age">年龄: {{ pet.age }}</div>
            </div>
        </div>
        <div class="pagination-container">
            <!-- 上一页按钮 -->
            <span v-if="currentPage > 1" class="pagination-button" @click="prevPage">上一页</span>
            <span v-for="page in totalPages" :key="page" :class="{
                'pagination-button': true,
                'active': page === currentPage,
                'disabled': page === currentPage && (currentPage === 1 || (currentPage * itemsPerPage) >= petListLihua.length)
            }" @click="() => changePage(page)">
                {{ page }}
            </span>
            <span v-if="(currentPage * itemsPerPage) < petListLihua.length" class="pagination-button"
                @click="nextPage">下一页</span>
        </div>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue"
import { useRouter } from "vue-router"
import {getOrherListAPI} from "@/api/pet"

const router = useRouter();

// 跳转到宠物详情页面
const goToDetail = (petId) => {
  router.push(`/petdetail/${petId}`);
};
// 接收宠物列表数据
const petListLihua = ref([])
// 当前页码，初始为1
const currentPage = ref(1)
// 每页显示的宠物项数量
const itemsPerPage = 8
// 计算总页数
const totalPages = computed(() => Math.ceil(petListLihua.value.length / itemsPerPage))
// 计算当前页显示的宠物项数据
const paginatedPetList = computed(() => {
    const startIndex = (currentPage.value - 1) * itemsPerPage
    const endIndex = startIndex + itemsPerPage
    return petListLihua.value.slice(startIndex, endIndex)
})
const getPetListLihua = async () => {
    const res = await getOrherListAPI()
    petListLihua.value = res.data.items
    // console.log(petData.value)
}
// 下一页方法
const nextPage = () => {
    if ((currentPage.value * itemsPerPage) < petListLihua.value.length) {
        currentPage.value++
    }
}

// 上一页方法
const prevPage = () => {
    if (currentPage.value > 1) {
        currentPage.value--
    }
}

// 页码点击跳转方法
const changePage = (page: number) => {
    if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page
    }
}
onMounted(() => {
    getPetListLihua()
})
</script>

<style scoped>
.pets-catli-container {
    width: 1200px;
    height: 700px;
    position: relative;
}

/* 宠物列表框 */
.pets-container {
    display: flex;
    flex-wrap: wrap;
    /* 宠物项间距 */
    gap: 20px;
    /* border: 1px solid black; */
}

.pets-item {
    /* 每行三个间距，间距总和：3*gap=60px */
    /* 每行显示四个，所以每个宠物项宽度为 (100% - 间距总和) / 4 */
    width: calc((100% - 60px) / 4);
    margin-bottom: 10px;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.pets-item:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    /* 鼠标悬浮时的阴影效果 */
}

.pet-img {
    width: 100%;
    height: 225px;
    display: block;
}

.pet-info {
    padding: 10px;
}

.name {
    font-size: 14px;
    color: #999;
}

.breed {
    font-size: 14px;
    color: #999;
}

.age {
    font-size: 14px;
    color: #999;
}

/* 分页器 */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    position: absolute;
    /* 设置为绝对定位 */
    right: 10px;
    /* 距离容器右侧10px */
    bottom: 10px;
    /* 距离容器底部10px */
}

.pagination-button {
    padding: 5px 10px;
    margin-right: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    text-decoration: none;
    color: #333;
}

.pagination-button.active {
    background-color: #333;
    color: white;
}

.pagination-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
</style>